<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>天气预报</title>
	<link rel="stylesheet" href="css/icon.css">
	<link rel="stylesheet" href="css/style.css">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
	<div class="wrap">
		<div class="container">
			<div class="keTitle">
				<div class="seat"></div>
				<input type="text" class="search-ipt" placeholder="请输入您要查询的城市">
				<button class="btn">搜索</button>
			</div>

			<div class="main">
				<div class="content-txt">
					<p class="time"><time></time>发布</p>
					<h2 class="degrees"><span class="deg"><i></i>°</span><span class="weat"></span></h2>
					<p class="proposal"><i>●</i><span class="txt"></span></p>
				</div>

				<div class="main-inner">
					<div class="cloudy yin"></div>
				</div>

				<ul class="list">
					<h3>五日天气预报</h3>
					<li class="item">
						<p class="item-time"></p>
						<p class="sky"></p>
					</li>
					<li class="item">
						<p class="item-time"></p>
						<p class="sky"></p>
					</li>
					<li class="item">
						<p class="item-time"></p>
						<p class="sky"></p>
					</li>
					<li class="item">
						<p class="item-time"></p>
						<p class="sky"></p>
					</li>
					<li class="item">
						<p class="item-time"></p>
						<p class="sky"></p>
					</li>
				</ul>
			</div>
		</div>
	</div>


	<script>
		function loadXMLDoc(dem){
			var xmlhttp;
			if (window.XMLHttpRequest){
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp=new XMLHttpRequest();
			}else{
				// IE6, IE5 浏览器执行代码
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function(){
				if (xmlhttp.readyState==4 && xmlhttp.status==200){
					var json = xmlhttp.responseText;
					console.log(json)
					//转成对象 数组
					json = JSON.parse(json)
					console.log(json)
					//添加vpi的内容
					document.querySelector(".seat").innerHTML = json.basic.city
					document.querySelector(".time time").innerHTML = json.basic.update.loc
					document.querySelector(".proposal .txt").innerHTML = json.suggestion.drsg.txt;
					var weat = document.querySelector(".weat")
					weat.innerHTML = json.now.cond.txt;
					var mainDv = document.querySelector(".main-inner>div")
					document.querySelector(".deg i").innerHTML = json.now.fl
					//做判断条件更换天气图
					if(weat.innerHTML = "阴"){
						mainDv.className="cloudy yin"
					}else if(weat.innerHTML = "多云"){
						mainDv.className="cloudy"
					}else if(weat.innerHTML = "晴"){
						mainDv.className="sunny"
					}else if(weat.innerHTML = "雷阵雨"){
						mainDv.className="stormy"
					}else if(weat.innerHTML = "雪"){
						mainDv.className="snowy"
					}else if(weat.innerHTML = "小雨"){
						mainDv.className="rainy"
					}






					var sky = document.querySelectorAll(".sky");
					var time1 = document.querySelectorAll(".item-time")

					for(var i = 0;i<time1.length;i++){
						sky[i].innerHTML = json.daily_forecast[i].cond.txt_d;
						time1[i].innerHTML = json.daily_forecast[i].date;
					}
				}
			}
			xmlhttp.open("GET","https://bird.ioliu.cn/weather?city="+dem,true);
			xmlhttp.send();
		}
		loadXMLDoc("沧州")

		document.querySelector(".btn").addEventListener("click", function(){
			var ipt = document.querySelector(".search-ipt");
			loadXMLDoc(ipt.value)
		})
		document.onkeydown = function (e) { // 回车提交表单
		// 兼容FF和IE和Opera
		    var theEvent = window.event || e;
		    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
		    if (code == 13) {
		        var ipt = document.querySelector(".search-ipt");
				loadXMLDoc(ipt.value)
		    }
		}
	</script>
</body>
</html>